<template>
    <div>
        <div class="card" style="padding: 15px">
            您好，{{ user?.name }}！欢迎使用本系统
        </div>
        <div  v-if="user.role === 'BUSINESS' && user.status !== '审核通过'">
            <el-alert
                title="阿良商场警告"
                type="warning"
                description="您的资料还没审核通过，请尽快完善自己的资料，否则无法正常使用系统"
                show-icon>
            </el-alert>
        </div>
        <div style="display: flex; margin: 10px 0" v-if="user.role === 'ADMIN' || user.status === '审核通过'">
            <div style="width: 50%;" class="card">
                <div style="margin-bottom: 30px; font-size: 20px; font-weight: bold">公告列表</div>
                <div>
                    <el-timeline reverse slot="reference">
                        <el-timeline-item v-for="item in notices" :key="item.id" :timestamp="item.time">
                            <el-popover
                                    placement="right"
                                    width="200"
                                    trigger="hover"
                                    :content="item.content">
                                <span slot="reference">{{ item.title }}</span>
                            </el-popover>
                        </el-timeline-item>
                    </el-timeline>
                </div>
            </div>
            <div style="width: 50%;" class="card">
                <div style="margin-bottom: 30px; font-size: 20px; font-weight: bold">评论数</div>
                <div id="pie" style="height: 400px"></div>
            </div>
        </div>
        <div style="display: flex; margin: 10px 0"  v-if="user.role === 'ADMIN' || user.status === '审核通过'">
            <div style="width: 50%;" class="card">
                <div style="margin-bottom: 30px; font-size: 20px; font-weight: bold">订单销量折线图</div>
                <div id="pie" style="height: 400px"></div>
            </div>
            <div style="width: 50%;" class="card">
                <div style="margin-bottom: 30px; font-size: 20px; font-weight: bold">热销商品</div>
                <div id="pie" style="height: 400px"></div>
            </div>
        </div>
    </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
    name: 'Home',
    data() {
        return {
            user: JSON.parse(localStorage.getItem('xm-user') || '{}'),
            notices: []
        }
    },
    created() {
        if (this.user.role === 'BUSINESS' && this.user.status !== '审核通过') {
            this.$confirm('您的资料还没审核通过，请尽快完善自己的资料！', '提示', {
                confirmButtonText: '现在去',
                cancelButtonText: '跳过',
                type: 'warning'
            }).then(() => {
               this.$router.push('/businessPerson')
            }).catch(() => {

            });
        }
        this.$request.get('/notice/selectAll').then(res => {
            this.notices = res.data || []
        })
    },
    mounted() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('pie'));
// 绘制图表
        myChart.setOption({
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            xAxis: {
                data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
            },
            yAxis: {},
            series: [
                {
                    name: '销量',
                    type: 'bar',
                    data: [5, 20, 36, 10, 10, 20]
                }
            ]
        });
    }
}
</script>

<style scoped>
.card {
    border-radius: 10px;
    margin: 0 10px;
}
</style>
